<template>
	<view :style="{'background':loadSetting.background}">
		<block v-if="!load.loadError">
			<!-- *******************全屏********************* -->
			<view class="zq-load-body" 
				v-if="!load.loadEnd && load.length == 0 && loadSetting.scope == 'body'" @touchmove.stop.prevent="">
				<view class="zq-load-animation-box toBig" :class="[loadSetting.loadClass]"></view>
			</view>
			<!-- *******************内容展示区********************* -->
			<view class="zq-load-content"
				:style="{'height':loadSetting.bodyHeight != 0 ? loadSetting.bodyHeight + 'rpx' : ''}"
				v-if="load.length > 0 && loadSetting.mode == 'list' || load.loadEnd && loadSetting.mode == 'info'">
				<slot></slot>
			</view>
			<!-- *******************部分********************* -->
			<view class="zq-load-box" 
				:style="{
					'height':loadSetting.loadHeight - loadSetting.subtractHeight + 'rpx'
				}" 
				v-if="!load.loadEnd && load.length == 0 && loadSetting.scope == 'box'">
				<view class="zq-load-animation-box toBig" v-if="!loadSetting.loadCustom" :class="[loadSetting.loadClass]"></view>
				<template v-else>
					<slot name="loadCustom"></slot>
				</template>
			</view>
			
			<view class="zq-load-box"
				:style="{
					'height':loadSetting.loadMoreHeight + 'rpx'
				}" 
				v-if="load.loadEnd && load.length < load.total && loadSetting.mode == 'list' && loadSetting.loadMoreType != 0">
				<view class="zq-load-more-none-text" 
					@click.stop="loadMore()"
					:style="{'color':color}"
					v-if="!loadSetting.moreCustom">
					{{load.loadError ? loadSetting.loadErrorPrompt : loadSetting.loadMorePrompt}}
				</view>
				<template v-else>
					<slot name="moreCustom"></slot>
				</template>
			</view>
			
			<view class="zq-load-box" 
				:style="{'height':loadSetting.loadMoreHeight + 'rpx'}" 
				v-if="!load.loadEnd && load.length > 0 && loadSetting.mode == 'list'">
				<view class="zq-load-animation-box toBig" v-if="!loadSetting.loadMoreCustom" :class="[loadSetting.loadClass]"></view>
				<template v-else>
					<slot name="loadMoreCustom"></slot>
				</template>
			</view>
			 <!-- *******************内容无数据区********************* -->
			<view class="zq-load-box" 
				:style="{'height':loadSetting.loadHeight - loadSetting.subtractHeight + 'rpx'}" 
				v-if="load.loadEnd && load.length == 0 && !load.loadMore && loadSetting.showLoadPrompt"
				>
					<view class="zq-load-none-text" 
						v-if="!loadSetting.noneCustom"
						:style="{'color':color}"
						@click="reset()">
						{{load.loadError ? loadSetting.loadErrorPrompt : loadSetting.loadNonePrompt}}
					</view>
					<template v-else>
						<slot name="noneCustom"></slot>
					</template>
			</view>
			<view class="zq-load-box toBig" 
				:style="{'height':loadSetting.loadMoreHeight + 'rpx'}" 
				v-if="load.loadEnd && load.length > 0 && !load.loadMore && loadSetting.showLoadMoreNonePrompt && loadSetting.mode == 'list'">
					<view class="zq-load-more-none-text" :style="{'color':color}" v-if="!loadSetting.moreNoneCustom">{{loadSetting.loadMoreNonePrompt}}</view>
					<template v-else>
						<slot name="moreNoneCustom"></slot>
					</template>
			</view>
		</block>
		<block v-else>
			<view class="zq-load-body" @touchmove.stop.prevent="">
				<view class="toBig zq-load-error-box" :class="[loadSetting.loadErrorClass]">
					
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default{
		props:{
			value:{
				default:{
					loadEnd:false,
					loadMore:true,
					loadError:false,
					length:0,
					total:0
				},
				type:Object
			},
			color:{//字体颜色
				default:'#999999',
				type:String
			},
			props:{//配置项
				default:null,
				type:Object
			}
		},
		data(){
			return{
				load:{//加载控制参数
					loadEnd:false,
					loadMore:true,
					length:0,
					total:0,
					loadError:false
				},
				loadSetting:{//加载设置
					loadClass:"zq-load-animation",
					loadErrorClass:"zq-load-error",
					scope:'box',//加载动画范围 box body
					mode:"list",//加载动画模式 info list
					background:'',//加载动画背景
					subtractHeight:0,//减少的高度
					loadHeight:0,//首次加载高度
					loadMoreHeight:80,//加载更多的高度
					bodyHeight:0,//内容高度
					showLoadPrompt:true,//显示首次加载无数据提示语
					showLoadMorePrompt:true,//显示加载更多提示语
					showLoadMoreNonePrompt:true,//显示加载更多没有数据提示语
					loadNonePrompt:'暂无记录',//没有数据的提示语
					loadMorePrompt:'上拉加载',//加载更多提示语
					loadMoreNonePrompt:'暂无更多',//没有更多加载数据的提示语
					loadErrorPrompt:"加载失败",//加载失败提示语
					loadCustom:false,//自定义加载
					loadMoreCustom:false,//自定义加载更多
					noneCustom:false,//没有数据时自定义
					moreCustom:false,//加载更多数据自定义
					moreNoneCustom:false,//没有更多数据时自定义
					loadMoreType:2//上拉加载更多的方式 0上拉 1点击 2上拉和点击
				},
				showMorePrompt:false,
				timer:null,
				windowHeight:0//内容高度
			}
		},
		created(){
			uni.getSystemInfo({
				success: (event) => {
					this.loadSetting.loadHeight = event.screenHeight * 750 / event.screenWidth;
					this.loadSetting.subtractHeight = 750 / event.screenWidth * event.safeArea.top + 88;
					if(this.value)this.load = Object.assign(this.load,this.value);
					
					if(this.props){
						this.loadSetting = Object.assign(this.loadSetting,this.props);
					}
				}
			})
		},
		watch:{
			value(nVal){
				if(!value){
					console.error("参数格式错误，请使用规范的数据格式")
					return
				}
				this.load = Object.assign(this.load,nVal);
				this.showMorePrompt = false;
				let long = (this.load.length % 10 + 1) * 100
				if(this.timer)clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.showMorePrompt = true;
				},long)
			},
			props(nVal){
				this.loadSetting = Object.assign(this.loadSetting,nVal);
			}
		},
		methods:{
			loadMore(){//加载更多
				if(this.loadSetting.loadMoreType > 0)this.$emit('loadMore');
			},
			reset(){//重新加载
				this.$emit('reset');
			}
		}
	}
</script>

<style>
	.zq-load-body{width: 750rpx;height:100vh;top: 0;left: 0;position: fixed;background: #FFFFFF;z-index: 998;box-sizing: border-box;}
	.zq-load-animation-box{position:relative;width: 750rpx;height: 80rpx;}
	.zq-load-error-box{position: relative;width: 750rpx;height: 100vh;transform: scale(0.5);}
	.zq-load-body .zq-load-animation-box{position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
	
	.zq-load-box{width: 750rpx;box-sizing: border-box;display: flex;flex-direction: row;align-items: center;justify-content: center;overflow: hidden;}
	
	.zq-load-content{width: 750rpx;}
	.zq-load-none-text{font-size: 24rpx;}
	.zq-load-more-none-text{position: relative;font-size: 24rpx;}
	.zq-load-animation{
		background:rgba(0,0,0,0) url() no-repeat 50% 50%;
	}
	.zq-load-error{
		background: url() no-repeat 50% 50%;
	}
</style>